<template>
  <view id="app" :style="{ backgroundImage: `url( ${baseUrl}/uploads/uniapp_image/staff/class_bg.png)`, }">
    <u-sticky>
      <u-navbar title="职工出勤记录" :bgColor="bgColor" leftIconColor="#fff" :autoBack="true"
        :titleStyle="{ color: '#FFF', fontSize: '32rpx' }"></u-navbar>
    </u-sticky>
    <view class="middle">
      <up-row class="up-row">
        <up-col span="8">
          <up-avatar :src="headtop.Imagesrc"  :size="headtop.size" shape="circle"></up-avatar>
          <view class="up-row-right">
            <view class="name">{{  headtop.name}}</view>
          <view class="item"><text>{{  headtop.sex}}</text><text>{{  headtop.age}}</text><u-icon name="phone-fill" color="#666" size="14"></u-icon></view>
          </view>
        </up-col>
        <up-col span="4">
          <view class="time">{{  headtop.time}}</view>
          <view class="hint">结算出勤时长</view>
        </up-col>
      </up-row>
      <view class="company-information" :style="{ backgroundImage: `url( ${baseUrl}/uploads/uniapp_image/staff/weitu.png)`, }">
        <view class="company-name">{{ company.name }}</view>
        <view class="company-time"><text>起</text>{{  company.starttime}}<text>-</text><text>止</text>{{ company.endtime  }}</view>
        <view class="company-classes">共4个班次：中班长期；中班短期；晚班长期；晚班短期</view>
      </view>
    </view>
    <scroll-view scroll-y class="scroll">
      <view class="content" v-for="(item,index) in list" :key="index">
        <view class="list-time">{{ item.time }}</view>
        <view class="attendance-item" v-for="(i,v) in item.item" :key="v">
          <view class="itemleft">
              <view class="names">{{ i.name }}</view>
              <view class="time">{{ i.time }}</view>
              <view class="clockingTime">
                <text>上班{{ i.starttime }} 下班 {{ i.endtime }}</text>
                <text class="blue">出勤{{ i.attendance }}</text>
              </view>
          </view>
          <view class="itemright">
            <button class="btn">缺卡</button>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { baseUrl } from '@/sheep/config';
import { ref } from 'vue';
const bgColor = ref('rgba(0,0,0,0)')
const  headtop = ref({
  Imagesrc:`${baseUrl}/uploads/uniapp_image/user/user_user_head.png`,
  name:'IU李知恩',
  sex:'男',
  age:'22岁',
  time:'0小时',
  size:'124rpx'
})
const company =  ref({
  name:'顺义圆通',
  starttime:'11月1日',
  endtime:'12月1日',
})
//列表
const list = ref([
  {
    time:'2023年11月30日',
    item:[
      {
        name:'中班-长期',
        time:'16:00 - 00:00',
        starttime:'15.24',
        endtime:'12.00',
        attendance:'0小时'
      }
    ]
  }

])
</script>

<style lang="scss">
page {
  width: 100%;
  height: 100%;
}

#app {
  background-size: 100%;
  width: 100%;
  min-height: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;

}

:deep(.u-icon__icon) {
  background: #3333336e;
  width: 64rpx;
  height: 64rpx;
  justify-content: center;
  border-radius: 50%;
}
// 用户信息
.middle{
  width: 93%;
	height: auto;
	margin: 190rpx  auto 0;
  :deep(.u-row){
    height: 220rpx;
    // background-color: red;
    .u-col-8{display: flex; flex-direction:row}
    .up-row-right{
      margin-left: 20rpx;
      font-family: PingFangSC;
      color: #FFFFFF;
      font-weight: $uni-font-weight;
      font-size: 30rpx;
      .name{font-size: 42rpx; margin-bottom: 17rpx}
      .item{text{margin-right: 10rpx;}display: flex;
      .u-icon__icon{background: $uni-bg-color;border-radius: 6rpx;
        width: 32rpx;
        height: 32rpx;
      }
    }
    }
    .u-avatar__image--circle{border: 2rpx solid $uni-bg-color;}
    .u-col-4{font-family: PingFangSC;
              color: #FFFFFF;
              font-weight: $uni-font-weight;
              font-size: $uni-font-size-sm;
              .time{font-size: 34rpx; margin-bottom: 14rpx;}
      }
  }
}
// 公司信息
.company-information{
    background-size: 100%;
    width: 100%;
    height: 202rpx;
    background-repeat: no-repeat;
    margin-bottom: 20rpx;
    .company-name{
      width: calc(100% - 40rpx);
      height: 56rpx;
      font-size: 38rpx;
      font-weight: 700;
      padding: 20rpx 0 0 40rpx;
    }
    .company-time{
      display: flex;
        width: 325rpx;
        color: $uni-color-primary;
        font-weight: $uni-font-weight;
       font-size:$uni-font-size-26;
        padding: 10rpx 0 0 40rpx;
        text{margin-right: 4rpx;
        &:nth-child(2){
          color: #332;
        }
        }
    }
    .company-classes{
       width: 100%;
        color: #333;
        font-weight: 500;
        font-size: $uni-font-size-sm;
        padding: 10rpx 0 0 40rpx;
    }
}
//列表
.scroll{
  margin-top: -40rpx;
  height: calc(100vh - 612rpx);
}
.content{
  width: 93%;
  height: auto;
  margin: 0rpx auto ;
  .list-time{
    font-family: PingFangSC;
    color: $uni-text-color;
    font-weight: 500;
    font-size: 30rpx;
    height: 80rpx;
    line-height: 80rpx;

  }
  .attendance-item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 16rpx;
    background-color: #FFFFFF;
    box-shadow: 0 2rpx 8rpx 0 rgba(0, 0, 0, 0.05);
    padding: 20rpx 30rpx ;
    font-family: PingFangSC;
    color: $uni-text-color;
    font-weight: 500;
    view{margin-top: 10rpx;}
    .names{ font-size: 30rpx;}
    .time{font-size: 38rpx;}
    .clockingTime{font-size: 24rpx; color: #999; .blue{margin-left: 16rpx; color: $uni-color-primary;}}
  }
  .itemright{
    .btn{width: 124rpx;
      height: 48rpx;
      line-height: 48rpx;
      border-radius: 24rpx;
      background-color: #EEEEEE; font-family: PingFangSC;
      color: $uni-text-color;
      font-weight: 500;
     font-size:$uni-font-size-26;
      &::after{border: none;}
    }
  }
}
</style>